<template>
  <div ref="container" style="width: 1014px;height: 598px;"></div>
</template>

<script>
const fetchData = [
    {
        "id": "1",
        "shape": "activity",
        "width": 40,
        "height": 40,
        "position": {
            "x": 10,
            "y": 280
        },
        "label": "批次维护"
    },
    {
        "id": "2",
        "shape": "activity",
        "width": 40,
        "height": 40,
        "position": {
            "x": 110,
            "y": 280
        },
        "label": "备货管理"
    },
    
    {
        "id": "15",
        "shape": "bpmn-edge",
        "source": "1",
        "target": "2"
    },

    {
        "id": "4",
        "shape": "activity",
        "width": 40,
        "height": 40,
        "position": {
            "x": 160,
            "y": 180
        },
        "label": "备货质量初检"
    },
    {
        "id": "5",
        "shape": "activity",
        "width": 40,
        "height": 40,
        "position": {
            "x": 160,
            "y": 380
        },
        "label": "样品评吸"
    },
    {
        "id": "6",
        "shape": "activity",
        "width": 40,
        "height": 40,
        "position": {
            "x": 270,
            "y": 180
        },
        "label": "工商交接质量复核"
    },
   {
        "id": "7",
        "shape": "activity",
        "width": 40,
        "height": 40,
        "position": {
            "x": 380,
            "y": 180
        },
        "label": "工商交接质量复核2"
    },

     {
        "id": "8",
        "shape": "activity",
        "width": 40,
        "height": 40,
        "position": {
            "x": 490,
            "y": 280
        },
        "label": "采购审核"
    },


    {
        "id": "9",
        "shape": "bpmn-edge",
        "source": "2",
        "target": "4"
    },
    {
        "id": "10",
        "shape": "bpmn-edge",
        "source": "4",
        "target": "6"
    },
    {
        "id": "11",
        "shape": "bpmn-edge",
        "source": "6",
        "target": "7"
    },
    {
        "id": "12",
        "shape": "bpmn-edge",
        "source": "2",
        "target": "5"
    },
    {
        "id": "13",
        "shape": "bpmn-edge",
        "source": "7",
        "target": "8"
    },
    {
        "id": "14",
        "shape": "bpmn-edge",
        "source": "5",
        "target": "8"
    },

    {
        "id": "16",
        "shape": "bpmn-edge",
        "source": "4",
        "target": "7",
        vertices: [
          { x: 180, y: 150 },
          { x: 380, y: 150 },
        ],
    },
]

import { Graph } from '@antv/x6'
Graph.registerNode(
  'activity',
  {
    inherit: 'rect',
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
    ],
    attrs: {
      body: {
        rx: 6,
        ry: 6,
        stroke: '#5F95FF',
        fill: '#EFF4FF',
        strokeWidth: 1,
      },
      label: {
        fontSize: 12,
        fill: '#262626',
      },
    },
  },
  true,
)
Graph.registerEdge(
  'bpmn-edge',
  {
    inherit: 'edge',
    attrs: {
      line: {
        stroke: '#A2B1C3',
        strokeWidth: 2,
      },
    },
  },
  true,
)

export default {
  data() {
    return {}
  },
  methods: {
    initChart() {
      this.graph = new Graph({
        container: this.$refs.container,
        connecting: {
          router: 'orth',
        },
        interacting: function () {
          return false
        },
      })
      this.graph.on('node:click', ({ e, x, y, node, view }) => {
        console.log('节点点击', e, x, y, node, view)
      })
    },
    loadData(data) {
      const cells = []
      data.forEach((item) => {
        if (item.shape === 'bpmn-edge') {
          cells.push(this.graph.createEdge(item))
        } else {
          cells.push(this.graph.createNode(item))
        }
      })
      console.log(cells, 'cells')
      this.graph.resetCells(cells)
      this.graph.zoomToFit({ padding: 10, maxScale: 1 })
    }
  },
  mounted() {
    this.initChart()
    this.loadData(fetchData)
  }
}
</script>